<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script> 
     var geocoder; 
      var map; 
      function initialize() { 
        geocoder = new google.maps.Geocoder(); 
        var latlng = new google.maps.LatLng(39.904214, 116.40741300000002); 
        var myOptions = { 
          zoom: 8, 
          center: latlng, 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      } 
     
      function codeAddress() { 
        var address = document.getElementById("address").value; 
        if (geocoder) { 
          geocoder.geocode( { 'address': address}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) { 
            //alert(results[0].geometry.location); 
              map.setCenter(results[0].geometry.location); 
              var marker = new google.maps.Marker({ 
                  map: map,  
                  position: results[0].geometry.location 
              }); 
            } else { 
              alert("Geocode was not successful for the following reason: " + status); 
            } 
          }); 
        } 
      } 
    </script> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width: 540px; height: 400px;"></div> 
      <div> 
        <input id="address" type="textbox" value="bei jing" style="width:400px;"> 
        <input type="button" value="Encode" onclick="codeAddress()"> 
      </div> 
    </body> 
    </html>